<template>
	<div class="breadcrumb">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/index' }">
				<i class="el-icon-s-home"></i>
				首页
			</el-breadcrumb-item>
			<el-breadcrumb-item v-for="(item, index) in list" :key="index">{{ item }}</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>

<script>
export default {
	name: 'breadcrumb',
	data() {
		return {
			list: []
		};
	},
	mounted() {
		let matched = this.$route.matched.filter(item => item.meta && item.meta.bread);
		let matcheds = matched.filter(item => item.meta && item.meta.bread);
		matcheds.map(item => {
			this.list = item.meta.bread;
		});
	}
};
</script>

<style scoped lang="scss">
.breadcrumb {
	padding: 0.8rem 0;
}
</style>
